<template>
    <div class="box-column container-grid">
        <ux-header-search
            ref="searchHeader"
            v-bind="enquiryData"
            :isCheckPermissions="false"
            @search="onQueryClick"
        ></ux-header-search>
        <div class="box-flex1 table">
            <vxe-grid
                v-bind="tableConfig"
                :data="dataStore.data"
                :columns="table.columns"
            >
                <template v-slot:operate="{ row }">
                    <ux-btn-group
                        :btns="table.btns"
                        :data="{ row, permissionsData }"
                    ></ux-btn-group>
                </template>
                <template v-slot:facethumb="{ row }">
                    <el-image style="width: 70px; height: 40px" :src="row.img_url" fit="contain" v-if="row.img_url !=='' && row.img_url !=='0' && row.img_url !== null " :preview-src-list="[row.img_url]"></el-image>
                </template>
            </vxe-grid>
        </div>
        <div class="pagination-el box-row box-center-end">
            <el-pagination
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                :current-page="dataStore.proxy.page"
                :page-size="dataStore.proxy.pageSize"
                :page-sizes="dataStore.pageSizes"
                :total="dataStore.pagination.total"
                :layout="'total, sizes, prev, pager, next, jumper'"
            ></el-pagination>
        </div>
    </div>
</template>

<script  lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Getter } from "vuex-class";
import { mixinTableStore } from "@/mixin/table/Store";
import { mixinTableHeader } from "@/mixin/table/Header";
import { mixinTabPage } from "@/mixin/tab/Page";
import { mixinTime } from "@/mixin/Time";
import moment from "moment";
@Component({
    mixins: [mixinTableStore, mixinTableHeader, mixinTabPage, mixinTime]
})
export default class DoorStrangerLogTable extends Vue {
    @Action("logTraffic/list") getList: any;
    @Action('equipmentDoor/passDoor') getPassDoor: any;
    mounted() {
        this.getPassDoor();
    }
    dataStore: any = {
        proxy: {
            defaultParams: { log_type: 4 },
      disposeItem: (item) => {
            item.visit_timeShow = moment(item.visit_time * 1000).format('YYYY-MM-DD HH:mm:ss');
            }
        }
    };
    table: any = {
        // 列配置
        columns: [
            {
                width: 70,
                type: "seq",
                title: "序号"
            },
            {
                title: "门禁名称",
                field: "door_name"
            },
            {
                title: "门禁guid",
                field: "door_guid"
            },
            {
                title: "开门凭证",
                field: "scrip_num"
            },
            {
                title: "开门方式",
                field: "open_way",
                params: 'typeData',
                formatter: (this as any).formatterData
            },
            {
                title: "开门状态",
                field: "open_status",
                params: 'openStatusData',
                formatter: (this as any).formatterData,
                className: function ({ row }) {
                    return ['', 'green ', 'red'][row.open_status];
                }
            },
            {
                title: "开门时间",
                field: "visit_time"
            },
            {
                title: "开门人脸",
                slots: { default: 'facethumb' },
                field: "img_url"
            },
            {
                title: "描述",
                field: "remark"
            }
        ]
    };
    @Getter("sharing/openType") typeData: any;
    @Getter("equipmentDoor/passDoor") passDoorData: any;

    openStatusData: any = [
        { label: '成功', value: "1" },
        { label: '失败', value: "2" }
    ];
    // 查询头下拉数据配置
    headerSelectList: any = [
        {
            dataName: "typeData",
            keyName: "open_way"
        },
        {
            dataName: "passDoorData",
            keyName: "door_sn"
        },
        {
            dataName: "openStatusData",
            keyName: "open_status"
        }
    ];

    // 查询头配置
    enquiryData: any = {
        fields: [
            {
                fieldType: "select",
                field: "open_way",
                label: "开门方式"
            },
            {
                fieldType: "select",
                 filterable: true,
                field: "door_sn",
                label: "门禁名称"
            },
            {
                fieldType: "daterange",
                field: "time",
                label: "开门时间",
                type: "daterange",
                format: "yyyy-MM-dd",
                pickerOptions: (this as any).getPickerOptions()
            }
        ],
        valueTransform: [
            {
                field: "time",
                // 对应DatePicker时间范围组件
                fields: ["start_time", "end_time"]
            }
        ]
    };
}
</script>
<style scoped lang="scss">
.header-search-el {
    margin-top: 0;
}
</style>
